/**
 * @description 此组件为折线+柱状图
 * @example
 * {idName： bar,
 *  xAxis: ['星期一', '星期二'],
 *  data: [
 *  {label: 'legend1', value:[{key: '星期一', value: 20},{key: '星期二', value: 20}]},
 * {label: 'legend2', value:[{key: '星期一', value: 20},{key: '星期二', value: 20}]}，
 * ]
 * }
 * @author muisuidaan
 */

import React, { useEffect, useState } from "react";
import * as echarts from "echarts";
import {
  axisLabelStyle,
  axisLineStyle,
  splitLineStyle,
  TOOLTIP_FONT_SIZE,
  yaxisLabelStyle,
  yaxisLineStyle,
} from "@/utils/echarts";
 import useIoObserve from '@/hook/useIoObserve'
import * as _ from 'lodash'

interface VProps {
  key: string; // 与x轴对应的值
  value: number; // y轴对应的值
}

export interface DataProps {
  label: string; // legend对应的中文
  value: VProps[];
}

export interface LineAndBarProps {
  idName: string; // 每一个echarts图需要一个dom来创建实例，该id用来标识唯一dom
  xAxis: string[]; // x轴为字符串数组
  legend: string[];
  data: DataProps[];
  color?: string[];
  legendStyle?:Object;
}

const LineAndPoint = (props: LineAndPointProps) => {
  const { idName, xAxis, data, legend, color,legendStyle } = props;
  console.log('LineAndPoint-props',props);
  const handleLineAndPointData = (arr: any, str?: string) => {
    let res: any = [];
    arr.map((v) => {
      res.push([v.key, v.value]);
    });
    // console.log('res****************',res, str);
    return res;
  };

  const options = {
    color,
    tooltip: {
      trigger: "axis",
      zIndex: 2,
      backgroundColor: "rgba(65,69,81,0.96)",
      extraCssText: "border-radius:2px",
      borderWidth: 0,
      textStyle: {
        fontSize: TOOLTIP_FONT_SIZE,
        color: "#fff",
        lineHeight:'28px'
      },
    },
    xAxis: {
      type: "category",
      data: xAxis,
      boundaryGap: true,//解决x轴被柱子遮挡
      axisLabel: {
        ...axisLabelStyle(),
        fontSize: 8,
      },
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      axisLine: {
        ...axisLineStyle(),
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      ...yaxisLineStyle(),
      axisLine: {
        ...yaxisLineStyle(),
        show: true,
      },
      axisLabel: {
        ...yaxisLabelStyle(),
        inside: false,
        fontSize: 8,
      },
      ...splitLineStyle(),
    },
    grid: {
      left: 10,
      right: 30,
      bottom: 10,
      top: 40,
      containLabel: true,
    },
    legend: {
      left:"center",
      type:"scroll",
      data: legend,
      icon: "rectangle",
      itemWidth: 11,
      itemHeight: 11,
      itemGap: 20,
      top: 5,
      textStyle: {
        fontSize: 10,
        color: "#35425e",
        width: 48,
        height: 28,
        lineHeight: 28,
        padding: [0, 0, -3, 2],
      },
      ...legendStyle
    },
    series: data.map((v,index) => {
      // console.log(11111,index,v.value,handleLineAndPointData(v.value), v.label, legend);
      let isTopArr = [];
      if(v?.value?.length>0 && index==1){
      // if(v?.value?.length>0 ){
      
        for(let i=0;i<v.value.length;i++){
          const item:any = v.value[i];
          if(item?.mark){
            //是峰值
            isTopArr.push({
              name: '峰值',
              coord:[item?.key, item?.value]
            })

          }
        }

      }
      console.log('isTopArr',isTopArr)
     
      return {
        name: v.label,
        data: handleLineAndPointData(v.value),
        type: "line",
        // barMaxWidth: index%2===0 ? 48 : undefined,
        top: "22%",
        // stack: "Total",
        // areaStyle: {
        //   opacity:.3
        // },
        lineStyle: {
          width: 1,
        },
        emphasis: {
          focus:'series',
          lineStyle: {
            width: 2,
          },
        },
        connectNulls: true,
        // emphasis: {
        //   focus: "series",
        // },
        symbol: 'none',
        markPoint: {
          symbol:index%2===0?'none':'roundRect',
          symbolSize:6,
          symbolOffset:[0, '-60%'],
          itemStyle:{
            // backgrounf:"#3457C4"
            color:"#3457C4",
            borderColor:"#fff",
            borderWidth:1,
            
          },

          label:{
            show:false,
            borderRadius:2
          },
          data: isTopArr
          // [
          //   // { type: 'max', name: 'Max' },
          //   // { type: 'min', name: 'Min' }
          //   {
          //     name: '某个坐标',
          //     coord: ["2019-12-31", 5.21]
          //   },
          //   {
          //     name: '某个坐标',
          //     coord: ["2020-06-30", 0.66]
          //   }
          // ]
        },
      };
    }),
  };

  const handleGenBar = () => {
    const dom = document.getElementById(idName);
    if (dom) {
      const myChart = echarts.init(dom);
      myChart.setOption(options);
    }
  };

  // 窗口大小改变
  const handleChangeSize = () => {
    setTimeout(() => {
      const dom = document.getElementById(idName);
      dom?.removeAttribute("_echarts_instance_");
      handleGenBar();
    }, 1);
  };

   useIoObserve(null, handleChangeSize, idName)

  useEffect(() => {
    // console.log('data',data);
    handleGenBar();
    window.addEventListener("resize", handleChangeSize);
    return () => {
      const dom = document.getElementById(idName);
      dom?.removeAttribute("_echarts_instance_");
      window.removeEventListener("resize", handleChangeSize);
    };
  }, [data]);

  return <div id={idName} style={{ width: "100%", height: "100%" }} onClick={(e)=>{e.stopPropagation()}}></div>;
};

export default LineAndPoint;
